<template>
  <div class="Echarts">
    <el-row style="margin: 10px 0px 10px 20px">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <el-date-picker
            v-model="daterangeOrderDate"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selDateCount"
          ></el-date-picker>
        </el-col>
    </el-row>    
    <div id="main" style="width: 100%;height:500px;margin-left:15px;"></div>
    <el-table v-loading="loading" :data="totalData">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="销售额(元)" align="center" prop="totalMoney"/>
    </el-table>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { selSaleQuotaCount } from "@/api/crm/index";

export default {
  name: 'saleBarChart',
  data(){
    return {
      names: [],
      values: [],
      totalData: [],
      chart: null,
      // 遮罩层
      loading: true,
      params: {startDate: '', endDate: ''},
      daterangeOrderDate: []
    }
  },
  methods:{
    //时间修改后查询
    selDateCount(){
      if(null != this.daterangeOrderDate){
        this.params = {startDate: this.daterangeOrderDate[0], endDate: this.daterangeOrderDate[1]};
      }else{
        this.params = {startDate: '', endDate: ''};
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('main'));
      this.setOptions(this.names, this.values)
    },
	  setOptions(names, values){
      this.chart.setOption({
			  title: {
				  text: '业绩排名'
			  },
			  tooltip: {},
			  legend: {
				  data:['销售额']
			  },
			  xAxis: {
				  data: names
			  },
			  yAxis: [{
            type : 'value',
            axisLabel:{formatter:'{value} 元'}
        }],
			  series: [{
				  type: 'bar',
				  data: values,
          itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#5470c6', '#91cc75','#fac858','#ee6666','#73c0de','#3ba272','#fc8452','#9a60b4','#ea7ccc'];
                  var index=params.dataIndex%colorList.length;
                  return colorList[index]
                }
              }
          }
			  }]
		  })
		},
    selSaleQuotaCount(params){
      selSaleQuotaCount(params).then(response => {
        this.names = response.data.names;
        this.values = response.data.values;
        this.totalData = response.data.totalData;
        this.loading = false;
        this.setOptions(this.names, this.values)
      });
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
      //值改变时触发
      params: {
      　　handler(newValue, oldValue) {
            this.selSaleQuotaCount(this.params);
      　　},
          deep: true,
      　　immediate: true
      }
  }
}
</script>

<style>

</style>